<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

      <div @click.self="myAlert('outer')">outer
        <div @click.capture="myAlert('inner')">inner
          <div @click="myAlert('content')">content</div>
        </div>
      </div>

      <form action="###">

        <button @click.prevent.once="myAlert('点击了按钮')">按钮</button>

      </form>

      <input type="text" @keyup.enter="myAlert('敲击了键盘')">

    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
         
        };
      },

    methods: {
      myAlert(str){

        alert(str);


      }
    },
    });
  </script>


</html>